import CustomFileUpload from "@/components/CustomFileUpload";
import { EditableProTable, FormInstance, ProFormUploadButton } from "@ant-design/pro-components";
import { Space } from "antd";

interface ParameterProps {
    [key: string]: any
    form: FormInstance
}

const Parameter: React.FC<ParameterProps> = ({
    form,
    name
}) => {

    return <EditableProTable<any>
        rowKey="key"
        maxLength={5}
        name={name}
        recordCreatorProps={{
            position: 'bottom',
            record: () => ({
                key: (Math.random() * 1000000).toFixed(0),
                sourceType: 'csv'
            }),
        }}
        toolBarRender={false}
        loading={false}
        columns={[
            {
                title: '名称',
                dataIndex: 'name',
                formItemProps: {
                    rules: [{ required: true }]
                }
            },
            {
                title: '文件类型',
                editable: false,
                dataIndex: 'sourceType',
            },
            {
                title: '分隔符',
                dataIndex: 'delimiter',
                formItemProps: {
                    rules: [{ required: true }]
                }
            },
            {
                title: '是否忽略首行',
                dataIndex: 'ignoreFirstLine',
                valueType: 'switch',
                fieldProps: {
                    checkedChildren: '是',
                    unCheckedChildren: '否'
                }
            },
            {
                title: '是否循环读取',
                dataIndex: 'recycle',
                valueType: 'switch',
                fieldProps: {
                    checkedChildren: '是',
                    unCheckedChildren: '否'
                }
            },
            {
                title: '变量名称 (逗号分割)',
                dataIndex: 'variableNames',
                formItemProps: {
                    rules: [{ required: true }]
                }
            },
            {
                title: '文件上传',
                dataIndex: 'remoteFilePath',
                formItemProps: {
                    rules: [{ required: true, message: '请上传文件' }]
                },
                renderFormItem(schema, config, form, action) {
                    return <CustomFileUpload maxCount={1} />
                },
                render: (text: any, record: any) => {
                    try {
                        const fileUrls = record?.remoteFilePath || []
                        return fileUrls ? <Space wrap>
                            {fileUrls?.map?.((it: any, index: number) => {
                                return <div key={it?.url + index}>
                                    <a href={it?.url}>{it?.name}</a>
                                </div>
                            })}
                        </Space> : '-'
                    } catch (e) {
                        console.log(e);
                    }
                    return '-'
                },
            },
            {
                title: '操作',
                valueType: 'option',
                render: (text, record, _, action) => [
                    <a
                        key="editable"
                        onClick={() => {
                            action?.startEditable?.(record.key);
                        }}
                    >
                        编辑
                    </a>,
                    <a
                        key="delete"
                        onClick={() => {
                            const tableDataSource = form?.getFieldValue(name) as any[];
                            form?.setFieldsValue({
                                [name]: tableDataSource?.filter((item) => item.key !== record.key),
                            });
                        }}
                    >
                        删除
                    </a>,
                ],
            },

        ]}
        editable={{
            type: 'multiple',
        }}
    />
}

export default Parameter